body {
    background-color: var(--themeColor);
}

.main {
    padding-bottom: 3rem;
}

.main .img-top {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #fff;
}

.main .search {
    height: 0.68rem;
    background: var(--ff);
    border-radius: 0.34rem;
    padding: 0 .07rem 0 .21rem;
}

.main .search .icon {
    width: .3rem;
    height: .3rem;
    margin-right: .1rem;
}

.main .search .search-btn {
    padding: .1rem .2rem;
    background: linear-gradient(to right, var(--bd1), var(--bd));
    border-radius: .34rem;
    color: #fff;
    border: none;
    font-size: var(--default-font-size-28);
}

.main .search .inp {
    font-size: var(--default-font-size-28);
}

.main .carousel {
    padding: .3rem 0;
    height: 3.4rem;
}

.main .carousel .layui-carousel {
    height: 3.4rem !important;
    border-radius: .20rem !important;
    background-color: transparent;
}

.main .carousel .layui-carousel > div[carousel-item] {
    border-radius: .20rem !important;
}

.main .carousel .layui-carousel > [carousel-item] > * {
    background-color: transparent;
}

.main .carousel .layui-carousel > div[carousel-item] img {
    width: 100%;
    height: 100%;
}

.main .capsule {
    width: 100%;
}

.main .layui-carousel-ind {
    top: -25px;
}

.main .layui-carousel-ind ul {
    background-color: initial;
}

.main .layui-carousel-ind ul li {
    width: .09rem;
    height: .09rem;
}

.main .news-carousel {
    background-color: var(--ff);
    padding: .2rem;
    height: .5rem;
    line-height: .5rem;
    position: relative;
}

.main .news-carousel .icon {
    width: .4rem;
    height: .4rem;
}

.main .news-carousel .car {
    margin-left: .2rem;
    width: 90%;
}

.main .news-carousel .car .gray {
    font-size: .24rem;
    color: var(--c9);
    position: absolute;
    top: 50%;
    right: .2rem;
    transform: translateY(-50%);
}

.main .news-carousel .layui-carousel {
    height: .4rem !important;
    line-height: .45rem !important;
}

.main .news-carousel .layui-carousel > [carousel-item] > * {
    background-color: #fff;
    font-size: var(--default-font-size-26);
    color: var(--dcl);
}

.category-container {
    display: flex;
    flex-wrap: wrap;
    padding: .1rem 0;
    background-color: var(--ff);
    border-radius: .20rem;
}

.category-item {
    margin: .2rem;
    box-sizing: border-box;
    text-align: center;
}

.category-item img {
    width: .86rem;
    height: .86rem;
    border-radius: 50%;
}

.category-item .category-text {
    margin-top: .18rem;
    font-size: .24rem;
    color: var(--dcl);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.l1r2 .vessel {
    height: 4.4rem;
    gap: .2rem;
}

.l1r2 .vessel .item {
    padding: .2rem;
}

.l1r2 .vessel .item .title {
    font-weight: 500;
    font-size: .30rem;
    color: var(--dcl);
}

.l1r2 .vessel .item .desc {
    font-weight: 400;
    font-size: .22rem;
    color: var(--c9);
    margin: .1rem 0;
    z-index: 99;
}

.l1r2 .vessel .item .go {
    background: #FAECED;
    border-radius: .20rem;
    font-size: .24rem;
    color: #EC1B24;
    padding: .09rem .09rem .08rem .09rem;
}

.l1r2 .vessel .item .go > i {
    font-size: .24rem;
}

.l1r2 .vessel .left {
    background-color: var(--ff);
    height: 100%;
    width: 50%;
    box-sizing: border-box;
    position: relative;
}

.l1r2 .vessel .left .bg-icon {
    position: absolute;
    bottom: .2rem;
    right: .2rem;
    width: 2.42rem;
    height: 2.54rem;
}

.l1r2 .vessel .right {
    gap: .2rem;
    height: 100%;
    width: 50%;
    box-sizing: border-box;
}

.l1r2 .vessel .right .fast,
.l1r2 .vessel .right .last {
    position: relative;
    height: 50%;
    background-color: var(--ff);
}

.l1r2 .vessel .right .desc {
    width: 60%;
}

.l1r2 .vessel .right .go {
    position: absolute;
    bottom: .2rem;
    left: .2rem;
}

.l1r2 .vessel .right .bg-icon {
    position: absolute;
    bottom: .2rem;
    right: .2rem;
    width: 1.33rem;
    height: 1.33rem;
}